<template>
  <!-- 品名 -->
  <div>
    <el-row>
      <el-col :span="8">
        <el-select
          v-model="limitType"
          :placeholder="$t('请选择')"
          @change="changeStatus"
          value-key="code"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="16" v-if="limitType == 2">
        <el-popover
          v-if="
            Boolean($route.query.readonly) &&
            selectData &&
            selectData.length > 0
          "
          placement="top"
          title=""
          width="400"
          trigger="hover"
        >
          <ul>
            <li v-for="(it, i) in selectData" :key="i">{{ it }}</li>
          </ul>
          <template slot="reference">
            <el-select
              v-model="checkedData"
              multiple
              collapse-tags
              filterable
              remote
              reserve-keyword
              :placeholder="$t('请输入编号或名称')"
              :remote-method="remoteMethod"
              @change="changeData"
              value-key="spuCode"
            >
              <el-option
                v-for="item in options"
                :key="item.spuConfigId"
                :label="item.spuCode + item.spuName"
                :value="item.spuCode"
              >
              </el-option>
            </el-select>
          </template>
        </el-popover>
        <el-select
          style="width: 60%"
          v-else
          v-model="checkedData"
          multiple
          collapse-tags
          filterable
          remote
          reserve-keyword
          :placeholder="$t('请输入编号或名称')"
          :remote-method="remoteMethod"
          @change="changeData"
          value-key="spuCode"
        >
          <el-option
            v-for="item in options"
            :key="item.spuConfigId"
            :label="item.spuCode + item.spuName"
            :value="item.spuCode"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'category',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    type: Number,
    warehouseId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      statusList: [
        { value: 1, label: this.$t('不限') },
        { value: 2, label: this.$t('指定') },
      ],

      options: [],
      checkedData: null,
      limitType: 1,
      selectData: null,
      spuId: null,
      multipleFlag: false,
    }
  },
  created() {
    if (this.value) {
      this.setData()
    }
    if (this.type == 1) {
      this.$emit('input', String(this.limitType))
    }
    eventBus.$on('changeValue', () => {
      this.$nextTick(() => {
        if (this.limitType == 1) {
          this.$emit('input', String(this.limitType))
        }
      })
    })
  },
  methods: {
    /**远程搜索品名数据 */
    remoteMethod(query) {
      let warehouseId = this.warehouseId || localStorage.getItem('warehouseId')
      if (warehouseId) {
        nonStandardService
          .queryList({
            pageNum: 1,
            pageSize: 999,
            warehouseId,
            spuNameOrCode: query,
          })
          .then((res) => {
            if (res.code == 200) {
              this.options = res.data.list
            }
          })
      }
    },
    setData() {
      this.remoteMethod('')
      this.selectData = JSON.parse(this.value).selectData
      this.checkedData = JSON.parse(this.value).checkedData
      this.limitType = JSON.parse(this.value).limitType
      this.spuId = JSON.parse(this.value).spuId
      localStorage.setItem('categoryType', this.limitType)
    },
    changeStatus(val) {
      this.checkedData = null
      this.selectData = null
      localStorage.setItem('categoryType', val)
      if (val == 1) {
        this.$emit('input', String(val))
      } else {
        this.$emit('input', '')
        this.remoteMethod('')
      }
      /**品名改变，对应的型号和固定属性要一起改变 */
      eventBus.$emit('categoryChange', {})
      /**状态改变，判断价格优先级 */
      eventBus.$emit('statusChange')
    },
    changeData(val) {
      this.selectData = []
      if (this.checkedData && this.checkedData.length == 1) {
        let info =
          (this.options &&
            this.options.find((it) => it.spuCode == this.checkedData[0])) ||
          {}
        this.selectData.push(info.spuCode + info.spuName)
        this.spuId = info.spuId
        this.multipleFlag = false
      } else if (this.checkedData && this.checkedData.length > 1) {
        this.options &&
          this.options.map((it) => {
            this.checkedData &&
              this.checkedData.map((item) => {
                if (it.spuCode == item) {
                  this.selectData.push(it.spuCode + it.spuName)
                }
              })
          })
        this.spuId = null
        this.multipleFlag = true
      }
      if (this.checkedData && this.checkedData.length) {
        this.$emit('input', String(this.limitType))
      } else {
        this.$emit('input', '')
      }
      /**品名改变，对应的型号和固定属性要一起改变 */
      eventBus.$emit('categoryChange', {
        spuId: this.spuId,
        multipleFlag: this.multipleFlag,
      })
    },

    getData() {
      return {
        spuId: this.spuId,
        checkedData: this.checkedData,
        value: this.selectData && this.selectData.join(','),
        selectData: this.selectData,
        limitType: this.limitType,
      }
    },
  },
}
</script>
